<template>
  <span class="badge" :class="[badgeColor]">{{progress}}/{{total}}</span>
</template>

<script>
  import {STAGE1,STAGE2,STAGE3,STAGE4,FINISH} from "../../assets/js/enum/ProgressColor"

  export default {
    name:"ProgressIndicator",
    props:{
      total:{
        type:Number|String,
        required:true
      },
      progress:{
        type:Number|String,
        required:true
      }
    },
    computed:{
      badgeColor() {
        let color = FINISH;
        //根据进度选用不同的颜色
        if(parseInt(this.total) > 0) {
          let rate = Math.round(parseInt(this.progress) * 100 / parseInt(this.total));
          if (rate < 40) color = STAGE1;
          else if (rate < 60) color = STAGE2;
          else if (rate < 80) color = STAGE3;
          else if (rate < 100) color = STAGE4;
        }
        return "bg-"+color;
      }
    }
  }
</script>



// WEBPACK FOOTER //
// ProgressIndicator.vue?12487f62
